<template>
  <v-main>
    <v-container
      fluid
      class="pa-4"
    >
      <v-card
        class="mx-auto elevation-12"
        max-width="600"
      >
        <v-card-title class="text-h5">个人中心</v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-row>
            <div class="avatar mx-2">
              <v-avatar size="100">
                <v-img
                  src="http://127.0.0.1:8000/media/mauth/avatars/avatar.png"
                ></v-img>
              </v-avatar>
            </div>
            <div class="d-flex align-center">
              <div>
                <div>
                  <span>
                    <strong>{{ userInfo.student_name }}</strong>
                    / {{ userInfo.gender == 1 ? "男" : "女" }} /
                    {{ userInfo.age }}岁
                  </span>
                </div>
                <div>
                  <span>{{ userInfo.grade || "20xx" }}</span>
                  /
                  <span>{{ userInfo.major || "xx专业" }}</span>
                  /
                  <span>{{ userInfo.classname || "xx班" }}</span>
                </div>
                <div>
                  {{ userInfo.height }} cm {{ userInfo.weight / 100 }} kg
                </div>
                <p>
                  <strong>电话号码:</strong>
                  {{ userInfo.phone_number || "未填写" }}
                </p>
              </div>
            </div>
          </v-row>
        </v-card-text>
        <v-card-actions class="d-flex justify-space-around">
          <v-btn
            color="warning"
            @click="openPasswordModal"
          >
            修改密码
          </v-btn>
          <v-btn
            color="primary"
            @click="openInfoModal"
          >
            修改个人信息
          </v-btn>
        </v-card-actions>
      </v-card>

      <v-dialog
        v-model="passwordModal"
        max-width="400"
      >
        <v-card>
          <v-card-title>修改密码</v-card-title>
          <v-card-text>
            <v-text-field
              v-model="oldPassword"
              label="旧密码"
              type="password"
            ></v-text-field>
            <v-text-field
              v-model="newPassword"
              label="新密码"
              type="password"
            ></v-text-field>
            <v-text-field
              v-model="confirmPassword"
              label="确认新密码"
              type="password"
            ></v-text-field>
          </v-card-text>
          <v-card-actions>
            <v-btn
              text
              @click="passwordModal = false"
            >
              取消
            </v-btn>
            <v-btn
              color="primary"
              @click="changePassword"
            >
              确定
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

      <v-dialog
        v-model="infoModal"
        max-width="600"
      >
        <v-card>
          <v-card-title>修改个人信息</v-card-title>
          <v-card-text>
            <v-text-field
              v-model="tempUserInfo.phone_number"
              label="电话号码"
            ></v-text-field>
            <v-text-field
              v-model="tempUserInfo.height"
              label="身高 (cm)"
            ></v-text-field>
            <v-text-field
              v-model="tempUserInfo.weight"
              label="体重 (kg)"
            ></v-text-field>
          </v-card-text>
          <v-card-actions>
            <v-btn
              text
              @click="infoModal = false"
            >
              取消
            </v-btn>
            <v-btn
              color="primary"
              @click="saveInfo"
            >
              确定
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-container>
  </v-main>
</template>

<script setup>
  import { ref } from "vue";

  const userInfo = ref({
    id: "c3577b92-e81f-4615-908c-ecf5851a2dec",
    student_name: "官利娟",
    student_id: "202210139202",
    gender: 0,
    phone_number: "",
    enroll_year: null,
    grade: null,
    birthday: "2003-01-01",
    classname: null,
    height: 0.0,
    weight: 0.0,
    major: null,
    created: "2025-04-30T23:52:57.529978+08:00",
    updated: null,
    user: 540,
  });

  const passwordModal = ref(false);
  const oldPassword = ref("");
  const newPassword = ref("");
  const confirmPassword = ref("");
  const infoModal = ref(false);
  const tempUserInfo = ref({ ...userInfo.value });

  const openPasswordModal = () => {
    passwordModal.value = true;
  };

  const changePassword = () => {
    if (newPassword.value === confirmPassword.value) {
      alert("密码修改成功");
      passwordModal.value = false;
    } else {
      alert("新密码和确认密码不一致");
    }
  };

  const viewQuestionnaireHistory = () => {
    alert("查看历史问卷记录");
  };

  const openInfoModal = () => {
    tempUserInfo.value = { ...userInfo.value };
    infoModal.value = true;
  };

  const saveInfo = () => {
    userInfo.value = { ...tempUserInfo.value };
    infoModal.value = false;
    alert("个人信息修改成功");
  };
</script>

<style scoped>
  /* 可在此处添加自定义样式 */
</style>
